import React,{Component} from "react";
import {  Popover } from 'antd';
import { NavLink, Link, Route, Redirect, withRouter } from "react-router-dom";
import Footer from "../component/footer.js";
import Header from "../component/header.js";
import HistoryBook from "../utils/personal/history.js";
import PersonalInf from "../utils/personal/personalInf.js";
import ChangePassword from "../utils/personal/changePassword.js";

import "../assets/stylesheets/personal.css";
import moment from 'moment';
const format = "YYYY-MM-DD";

class Personal extends Component{
    constructor(props){
        super(props);
        this.state = {
            username:localStorage.getItem("username"),
            history:{
                type:"0"
            },
            personalInf:{},
            password:{},
            changeInf:{},
        }
    }
    componentDidMount(){
        if(!this.state.username){
            this.props.history.push({ pathname:'/login' });
        }
    }
    
    render(){
        const state = this.state;
        return(
        <div>
            <Header></Header>
            <div className="user-box">
                <div className="left">
                    <div className="name">
                        {/* <span></span> */}
                        <p>{state.username}</p>
                    </div>
                    <ul>
                        <li><NavLink to="/personal/history" activeClassName="active"><span>历史订单</span></NavLink></li>
                        <li><NavLink to="/personal/personalInf" activeClassName="active"><span>个人信息</span></NavLink></li>
                        <li><NavLink to="/personal/changePassword" activeClassName="active"><span>修改密码</span></NavLink></li>
                    </ul>
                </div>
                <div className="right">
                    <Route exact path="/personal/history" component={HistoryBook} />
                    <Route exact path="/personal/personalInf" component={PersonalInf} />
                    <Route exact path="/personal/changePassword" component={ChangePassword} />
                    <Route exact path="/personal" render={()=>(<Redirect  to="/personal/history" />)} /> 
                </div>
            </div>
            <Footer></Footer>
       </div>)
    }
}
export default withRouter(Personal);